<template>
	<view style="padding-bottom: 20rpx;">
		<custom-nav-sq-xcx :isBack="true" :needConBlock="true" conCol='#000' currBg="sqGk">
			<template v-slot:content>发布帖子</template>
		</custom-nav-sq-xcx>
		<view class="padd">
			<view class="bbsTit">
				<input class="titInp" type="text" placeholder="请输入标题(30字内)" maxlength="30" placeholder-style="color:#8f91af;"/>
			</view>
			<view class="bbsTxtArea">
				<textarea class="txtArea" placeholder="请输入正文" maxlength="-1" placeholder-style="color:#8f91af;"></textarea>
			</view>
			<view class="bbsTitTag">请选择封面图片</view>
			<view class="bbsCoverList spaceBet">
				<view class="coverDef spaceBet">
					<view class="defList flexAll"
						:class="[coverDefIndex == index ? 'active' : '']"
						v-for="(item,index) in coverDefArr"
						:key="index"
						@tap="selBbsCover(index,item)"
					>
						<image class="coverDefImg" :src="getStaticFilePath(item.src)"></image>
					</view>
				</view>
				<view class="coverCustom posRel">
					<view class="selCustom samePar flexAll posAbso ltzero">
						<view class="iconfont icon-jia"></view>
					</view>
					<!--  @upImgIng="upImgIng" @uploadSingleImg="uploadSingleImg"  @tap="previewSingleImage(mainSucc)"-->
					<upload-image :mainImg="mainImg" :pathName="pathName" :needSingleSrc="false" :currType="currType" :radius="radius" @upImgIng="upImgIng" @uploadSingleImg="uploadSingleImg"></upload-image>
					<view class="customCover samePar posAbso ltzero" v-if="mainSucc != ''" @tap="selCustomPic">
						<image class="samePar coverImg" mode="aspectFill" :src="getUrl(mainSucc)"></image>
						<view class="selView flexAll samePar posAbso ltzero" v-if="coverDefIndex == 3">
							<view class="iconfont icon-wrong posAbso" @tap="delCustomCover"></view>
							<view class="iconfont icon-duihao"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="bbsTitTag">请选择附图(选填)</view>
			<view class="bbsImgList" style="margin: -10rpx 0 30rpx -10rpx;">
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image,index) in albumList" :key="index">
							<view class="uni-uploader__file">
								<view class="iconfont icon-wrong posAbso" @tap="delect(index)"></view>
								<image class="uni-uploader__img" :src="image" :data-src="image"
									@tap="previewImage" mode="aspectFill"></image>
							</view>
						</block>
						<view class="uni-uploader__input-box" v-show="hasFullFlag">
							<view class="uni-uploader__input" @tap="chooseImage"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="bbsTitTag">标签(至少添加一个)</view>
			<view class="bbsTagList hasFlex">
				<view class="bbsTagItem"
					:class="[item.selFlag ? 'active' : '']"
					v-for="(item,index) in bbsTagList"
					:key="index"
					@tap="selBbsTag(index,item.name)"
				>{{item.name}}</view>
			</view>
			<button class="comBtn" :disabled="btnDisabFlag">{{btnTit}}</button>
		</view>
	</view>
</template>

<script>
	import uploadImg from '@/components/upload-image/upload-image'
	import upMultiImg from '@/mixins/upMultiImg.js'
	export default {
		components:{
			uploadImg
		},
		mixins:[upMultiImg],
		data(){
			return{
				coverDefArr:[
					{src:'fileimg.png'},
					{src:'shujuimg.png'},
					{src:'bijiimg.png'}
				],
				coverDefIndex:-1,
				currType:'',
				coverSrc:'',
				bbsTagList:[
					{name:'置换',selFlag:false},
					{name:'出/租房',selFlag:false},
					{name:'咨询',selFlag:false},
					{name:'城事',selFlag:false},
					{name:'家政',selFlag:false},
					{name:'失物招领',selFlag:false},
					{name:'其他',selFlag:false}
				],
				bbsTagArr:[],
				mainImg:'',
				mainSucc:'',
				radius:10,
				pathName: 'sqSys/sqBbs',//社区意见反馈
				sigleImgList:[]
			}
		},
		methods:{
			selCustomPic(){
				this.coverDefIndex = 3;
				this.coverSrc = this.mainSucc;
				console.log(this.coverSrc)
			},
			getUrl(url){
				return this.cloudUrl + url
			},
			selBbsCover(index,item){
				this.coverDefIndex = index;
				this.coverSrc = item.src;
				console.log(this.coverSrc)
			},
			//上传封面图
			upImgIng(){
				this.btnTit = '上传中...';
				this.btnDisabFlag = true;
			},
			uploadSingleImg(e){
				this.sigleImgList = [];
				this.btnTit = '确认提交';
				this.btnDisabFlag = false;
				this.mainSucc = e.succSrc;
				this.coverDefIndex = 3;
				this.coverSrc = this.mainSucc;
				let tmpSuccSrc = this.cloudUrl + this.mainSucc;
				this.sigleImgList.push(tmpSuccSrc);
				console.log(this.coverSrc)
			},
			//删除自定义上传封面图
			delCustomCover(){
				uni.showModal({
					title: '提示',
					content: '是否要删除该封面图片吗?',
					confirmColor:'red',
					success: (res)=> {
						if (res.confirm) {
							this.sigleImgList = [];
							this.mainSucc = ''
						}
					}
				});
			},
			//预览自定义封面
			previewSingleImage(src){
				var current = this.cloudUrl + src;
				uni.previewImage({
					current: current,
					urls: this.sigleImgList
				})
			},
			selBbsTag(index,name){
				this.util.commonMultiSelect(this.bbsTagList,this.bbsTagArr,index,name);
			},
			goPub(){
				
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $sq-fuf;
	}
</style>
<style lang="scss" scoped>
	@import url("/static/css/common/uni.css");
	.selView{
		background: rgba(0,0,0,.5);
		color: #fff;
		border-radius: 10rpx;
		.icon-duihao{
			font-size: 50rpx;
		}
		.icon-wrong{
			width: 60rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			background: rgba(0,0,0,.6);
			color: #fff;
			right: 0rpx;
			top: 0rpx;
			border-radius:0 10rpx 0rpx 10rpx;
			font-size: 30rpx;
		}
	}
	.comUpWid{
		width: 216rpx;
		height: 216rpx;
	}
	.comBtn{
		background: $pss-sq-main;
		border-radius: 20rpx;
	}
	.pubBtn{
		width: 100rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size:24rpx;
		background: #8C70F7;
		color: #fff;
		border-radius: 10rpx;
		&.disBg{
			background: #c3b4fa;
		}
	}
	.bbsTit{
		height: 89rpx;
		border-bottom: 1rpx solid #e4e3ee;
		.titInp{
			height: 89rpx;
			line-height: 89rpx;
			font-size: 30rpx;
			color: $sq-main0;
		}
	}
	.bbsTxtArea{
		height: 500rpx;
		margin:20rpx 0 40rpx;
		.txtArea{
			width: 100%;
			height: 100%;
			color: $sq-main0;
			font-size: 28rpx;
			line-height: 50rpx;
		}
	}
	.bbsTitTag{
		width: 280rpx;
		height: 46rpx;
		line-height: 46rpx;
		border:1rpx solid #EFEEFC;
		text-indent: 15rpx;
		font-size: 24rpx;
		color: $sq-main8;
		border-radius: 10rpx 10rpx 10rpx 0;
	}
	.bbsCoverList{
		margin:20rpx 0 40rpx;
		.coverDef{
			flex: 1;
			margin-right: 15rpx;
		}
		.comCover{
			width: 160rpx;
			height: 160rpx;
			background: $sq-fue;
			border-radius: 10rpx;
		}
		.defList{
			@extend .comCover;
			.coverDefImg{
				width: 120rpx;
				height: 120rpx
			}
			&.active{
				background: #c0bbfa;
			}
		}
		.coverCustom{
			@extend .comCover;
			.selCustom{
				z-index: 1;
				.icon-jia{
					font-size: 50rpx;
					color: $pss-sq-main;
				}
			}
			.customCover{
				z-index: 10;
				.coverImg{
					border-radius: 10rpx;
				}
			}
		}
	}
	.uni-uploader__input-box{
		border: none;
		background:$sq-fue;
		border-radius: 10rpx;
		@extend .comUpWid;
		&::before,
		&::after{
			background: $pss-sq-main;
		}
		&::before{
			width: 6rpx;
			height:60rpx;
		}
		&::after{
			width: 60rpx;
			height:6rpx;
		}
	}
	.uni-uploader__file{
		position: relative;
		@extend .comUpWid;
		.uni-uploader__img{
			@extend .comUpWid;
		}
	}
	.bbsTagList{
		flex-wrap: wrap;
		margin:20rpx 0 40rpx;
		.bbsTagItem{
			background: $sq-fue;
			height: 46rpx;
			line-height: 46rpx;
			padding: 0 20rpx;
			margin-right: 15rpx;
			font-size: 24rpx;
			color: $sq-main8;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			&.active{
				background: $pss-sq-main;
				color: #fff;
			}
		}
	}
</style>